<template>
	<view>

		<view class="top-bg">
			<image src="../../../static/server/bg3.png" mode="scaleToFill"></image>
		</view>

		<view class="content">

			<view class="item" style="padding: 10upx 0;margin-bottom: 140upx;">
				<rich-text :nodes="html"></rich-text>
			</view>

		</view>

		<view class="bottom-btn bottom">
			<text @click="btnClick">客服帮助</text>
		</view>

		<u-popup mode="bottom" :show="show" round="10" @close="closePop">

			<view class="pop">

				<text @click="makehotLine">客服热线</text>
				<u-line color="#efefef"></u-line>
				<view @click="online">
					<button open-type='contact'>
						在线客服
					</button>
				</view>
				<view style="background-color: #f2f2f2;height: 10upx;"></view>
				<text @click="closePop">取消</text>


			</view>

		</u-popup>

	</view>
</template>

<script>
	import {
		afterservice,
		hotline
	} from '../../../common/api.js';

	export default {
		data() {
			return {
				id: '',
				html: '',
				hotLine: '',
				show: false
			}
		},
		methods: {

			getData() {
				afterservice().then(res => {
					this.id = res.id;
					this.html = res.internalJump;
				})

				hotline().then(res => {
					this.hotLine = res;
				})
			},

			makehotLine() {
				this.show = false
				let that = this;
				uni.makePhoneCall({
					phoneNumber: that.hotLine,
					success() {
						// _self.onClose()
					}
				})
			},

			online() {
				this.show = false
				let that = this;
			},

			btnClick() {
				this.show = true
			},

			closePop() {
				this.show = false
			},

		},

		onLoad() {
			this.getData();
		}
	}
</script>

<style lang="scss" scoped>
	.top-bg {
		image {
			width: 100%;
			height: 220upx;
		}
	}

	.content {
		position: relative;
		top: -60upx;
		height: 200upx;
		margin: 0 10upx;
		@include flex(column);
	}

	.pop {
		@include flex(column);

		text,
		button {
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			color: $black33;
			font-size: 32upx;
			background-color: $white;
		}
	}

	.bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 2;
	}
</style>
